<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>确认订单</p>
    </header>

    <!-- 订单信息部分 -->
    <div class="order-info">
      <h5>订单配送至：</h5>
      <div class="order-info-address" @click="toUserAddress">
        <p v-if="deliveryAddress!=null">{{deliveryAddress.address}}</p>
        <p v-else>请选择收货地址</p>
        <i class="fa fa-angle-right"></i>
      </div>
      <p>{{business.businessName}}</p>
    </div>

    <!-- 订单明细部分 -->
    <ul class="order-detailed">
      <li v-for="item in cartArr">
        <div class="order-detailed-left">
          <img :src="item.foodImg">
          <p>{{item.foodName}}</p>
        </div>
        <div class="order-detailed-right">
          <p>&#165;{{item.foodPrice}}</p>
          <p>×{{item.quantity}}</p>
        </div>
      </li>
    </ul>

    <!-- 订单支付部分 -->
    <div class="order-payment">
      <div class="order-payment-left">
        <p>&#165;{{totalPrice}}</p>
      </div>
      <div class="order-payment-right">
        <button @click="toPayment">去支付</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getCurrentInstance } from 'vue'
import request from '@/utils/request'

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const businessId = ref(route.query.businessId)
const business = ref({})
const cartArr = ref([])
const deliveryAddress = ref(null)
const user = ref({})

onMounted(() => {
  const token = sessionStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  user.value = proxy.$getSessionStorage('user')
  if (!user.value) {
    ElMessage.warning('用户信息已失效，请重新登录')
    router.push('/login')
    return
  }

  request({
    url: '/BusinessController/getBusinessById',
    method: 'get',
    params: {
      businessId: businessId.value
    }
  }).then(response => {
    business.value = response.data
  }).catch(error => {
    console.error(error)
  })

  request({
    url: '/CartController/listCart',
    method: 'get',
    params: {
      businessId: businessId.value,
      userId: user.value.userId
    }
  }).then(response => {
    cartArr.value = response.data
  }).catch(error => {
    console.error(error)
  })

  request({
    url: '/DeliveryAddressController/listDeliveryAddressByUserId',
    method: 'get',
    params: {
      userId: user.value.userId
    }
  }).then(response => {
    let deliveryAddressArr = response.data
    for (let i = 0; i < deliveryAddressArr.length; i++) {
      if (deliveryAddressArr[i].daId == user.value.daId) {
        deliveryAddress.value = deliveryAddressArr[i]
        break
      }
    }
  }).catch(error => {
    console.error(error)
  })
})

const toUserAddress = () => {
  router.push({
    path: '/userAddress',
    query: {
      businessId: businessId.value
    }
  })
}

const toPayment = () => {
  if (deliveryAddress.value == null) {
    alert('请选择送货地址！')
    return
  }
  router.push({
    path: '/payment',
    query: {
      businessId: businessId.value,
      daId: deliveryAddress.value.daId
    }
  })
}

const totalPrice = computed(() => {
  let total = 0
  cartArr.value.forEach(item => {
    total += item.foodPrice * item.quantity
  })
  return total + business.value.deliveryPrice
})
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #eee;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper .order-info {
  width: 100%;
  margin-top: 12vw;
  background-color: #fff;
  padding: 4vw;
  box-sizing: border-box;
}

.wrapper .order-info h5 {
  font-size: 4vw;
  font-weight: 300;
}

.wrapper .order-info .order-info-address {
  width: 100%;
  position: relative;
  padding: 2vw 0;
  border-bottom: solid 1px #DDD;
  user-select: none;
  cursor: pointer;
}

.wrapper .order-info .order-info-address p {
  font-size: 4vw;
  font-weight: 700;
  margin-bottom: 2vw;
}

.wrapper .order-info .order-info-address i {
  font-size: 6vw;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.wrapper .order-info>p {
  margin-top: 2vw;
  font-size: 4vw;
  font-weight: 700;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailed {
  width: 100%;
  margin-top: 3vw;
  background-color: #fff;
  padding: 4vw;
  box-sizing: border-box;
}

.wrapper .order-detailed li {
  width: 100%;
  height: 16vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .order-detailed li .order-detailed-left {
  display: flex;
  align-items: center;
}

.wrapper .order-detailed li .order-detailed-left img {
  width: 10vw;
  height: 10vw;
}

.wrapper .order-detailed li .order-detailed-left p {
  font-size: 3.5vw;
  margin-left: 3vw;
}

.wrapper .order-detailed li .order-detailed-right {
  display: flex;
  align-items: center;
}

.wrapper .order-detailed li .order-detailed-right p {
  font-size: 3.5vw;
  margin-left: 3vw;
}

/****************** 订单支付部分 ******************/
.wrapper .order-payment {
  width: 100%;
  height: 14vw;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
}

.wrapper .order-payment .order-payment-left {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .order-payment .order-payment-left p {
  font-size: 4.5vw;
  font-weight: 700;
}

.wrapper .order-payment .order-payment-right {
  flex: 1;
}

.wrapper .order-payment .order-payment-right button {
  width: 100%;
  height: 100%;
  background-color: #38CA73;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  border: none;
  outline: none;
}
</style> 